<template>
    <div>
      <el-tabs @tab-click="handClick">
        <el-tab-pane label="全部" name="1">
          <div class="item" v-for="(item,index) in newMv" :key="index">
            <img :src="item.cover" width="350" height="200">
            <span class="checkspan">{{item.name}}</span>
            <span class="checkspan" style="color: #0086b3">{{item.artistName}}</span>
            <el-button type="primary" @click="playMv(item.id)">播放</el-button>
          </div>
          <div>
            <video ref='video' :src="mvUrl" controls="controls" class="vodiotext"></video>
          </div>
        </el-tab-pane>
        <el-tab-pane label="内地" name="2">
          <div class="item" v-for="(item,index) in newMv" :key="index">
            <img :src="item.cover" width="350" height="200">
            <span class="checkspan">{{item.name}}</span>
            <span class="checkspan" style="color: #0086b3">{{item.artistName}}</span>
            <el-button type="primary" @click="playMv(item.id)">播放</el-button>
          </div>
          <div>
            <video ref='video' :src="mvUrl" controls="controls" class="vodiotext"></video>
          </div>
        </el-tab-pane>
        <el-tab-pane label="港台" name="3">
          <div class="item" v-for="(item,index) in newMv" :key="index">
            <img :src="item.cover" width="350" height="200">
            <span class="checkspan">{{item.name}}</span>
            <span class="checkspan" style="color: #0086b3">{{item.artistName}}</span>
            <el-button type="primary" @click="playMv(item.id)">播放</el-button>
          </div>
          <div>
            <video ref='video' :src="mvUrl" controls="controls" class="vodiotext"></video>
          </div>
        </el-tab-pane>
        <el-tab-pane label="欧美" name="4">
          <div class="item" v-for="(item,index) in newMv" :key="index">
            <img :src="item.cover" width="350" height="200">
            <span class="checkspan">{{item.name}}</span>
            <span class="checkspan" style="color: #0086b3">{{item.artistName}}</span>
            <el-button type="primary" @click="playMv(item.id)">播放</el-button>
          </div>
          <div>
            <video ref='video' :src="mvUrl" controls="controls" class="vodiotext"></video>
          </div>
        </el-tab-pane>
        <el-tab-pane label="日本" name="5">
          <div class="item" v-for="(item,index) in newMv" :key="index">
            <img :src="item.cover" width="350" height="200">
            <span class="checkspan">{{item.name}}</span>
            <span class="checkspan" style="color: #0086b3">{{item.artistName}}</span>
            <el-button type="primary" @click="playMv(item.id)">播放</el-button>
          </div>
          <div>
            <video ref='video' :src="mvUrl" controls="controls" class="vodiotext"></video>
          </div>
        </el-tab-pane>
        <el-tab-pane label="韩国" name="6">
          <div class="item" v-for="(item,index) in newMv" :key="index">
            <img :src="item.cover" width="350" height="200">
            <span class="checkspan">{{item.name}}</span>
            <span class="checkspan" style="color: #0086b3">{{item.artistName}}</span>
            <el-button type="primary" @click="playMv(item.id)">播放</el-button>
          </div>
          <div>
            <video ref='video' :src="mvUrl" controls="controls" class="vodiotext"></video>
          </div>
        </el-tab-pane>
      </el-tabs>
      <el-tabs @tab-click="handClick1">
        <el-tab-pane label="上升最快" name="first">用户管理</el-tab-pane>
        <el-tab-pane label="最热" name="second">配置管理</el-tab-pane>
        <el-tab-pane label="最新" name="third">角色管理</el-tab-pane>
      </el-tabs>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagenum"
        :page-sizes="[10, 30, 50, 80]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
</template>

<script>
export default {
  name: 'NewMv',
  data () {
    return {
      area: '全部',
      order: '上升最快',
      mvUrl: '',
      newMv: [],
      pagesize: 30,
      pagenum: 1,
      total: 0,
      offset: 0
    }
  },
  watch: {
    area () {
      console.log(this.area)
      this.getMv()
    },
    order () {
      console.log(this.order)
      this.getMv()
    }
  },
  created () {
    this.getMv()
  },
  methods: {
    async getMv () {
      const { data: res } = await this.$http.get(`/mv/all?area=${this.area}&limit=${this.pagesize}&offset=${this.offset}&order=${this.order}`)
      console.log(res)
      this.newMv = res.data
      this.total = res.count
    },
    // 获取MV地址
    playMv (vid) {
      if (vid) {
        // 获取mv信息
        this.$http.get('/mv/url?id=' + vid).then(response => {
          // 获取mv地址
          // console.log(response)
          this.mvUrl = response.data.data.url
          console.log(this.mvUrl)
        })
      } else {
        this.$message.error('获取MV地址失败！')
      }
    },
    // 监听tabs改变事件
    handClick (tab, event) {
      if (tab.name === '1') {
        this.area = '全部'
      } else if (tab.name === '2') {
        this.area = '内地'
      } else if (tab.name === '3') {
        this.area = '港台'
      } else if (tab.name === '4') {
        this.area = '欧美'
      } else if (tab.name === '5') {
        this.area = '日本'
      } else if (tab.name === '6') {
        this.area = '韩国'
      }
    },
    handClick1 (tab, event) {
      if (tab.name === 'first') {
        this.order = '上升最快'
      } else if (tab.name === 'second') {
        this.order = '最热'
      } else if (tab.name === 'third') {
        this.order = '最新'
      }
    },
    // 分页改变事件
    handleSizeChange (newSize) {
      this.pagesize = newSize
      this.getMv()
    },
    handleCurrentChange (newPage) {
      console.log(`${newPage}`)
      this.pagenum = newPage
      this.offset = (this.pagenum - 1) * this.pagesize
      console.log(this.offset)
      this.getMv()
    }
  }
}
</script>

<style lang="less" scoped>
  .item{
    float: left;
    padding: 25px;
  }
  .checkspan{
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
    -webkit-box-orient: vertical; // 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
    -webkit-line-clamp: 1;
    font-size: 14px;
  }
  .vodiotext{
    width: 100%;
  }
</style>
